<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<!--    方法调用（）-->
   <div> {{getFullName()}} </div>
<!--   直接使用属性名-->
   <div> {{fullName}} </div>

   <div> {{fullName2}} </div>

    <div>{{counter}}</div>
    <button @click="btnClick">+</button>
</div>

<script>
    const  vm = new Vue(
        {
            el:"#app",
            data:{
                firstName:'ma',
                lastName:'jack',
                counter:0,
                fullName2:'jack ma'
            },
            computed:{// 计算属性 进行缓存的
                fullName:function () {
                    console.log("computed fullName");
                    return this.lastName +" "+ this.firstName
                }
            },
            methods:{// 每次渲染页面 都会被执行
                getFullName:function () {
                    console.log("getFullName ");
                    return this.lastName +" "+ this.firstName
                },
                btnClick:function () {
                    this.counter++
                }
            },
            watch:{ // 异步 或者开销较大的操作 才使用watch ，如下就是对watch的一个不好的使用案例。
                firstName: function () {
                    this.fullName2 = this.lastName +" "+ this.firstName
                },
                lastName:function () {
                    this.fullName2 = this.lastName +" "+ this.firstName
                }
            }
        }
    )

</script>


</body>
</html>